<template>
	<view class="choiceShop">
		<!-- 下拉框 -->
		<view class="pickerBox flex-r-c-c" @tap.stop="toChooseCity">
			<!-- addressShow = true -->
			<view class="text" style="">{{addressListText}}</view>
			<u-icon name="map-fill" color="#7F8084"></u-icon>
			<view class="list flex-r-b-c" @tap.stop="WXAddress">
				<input style="width: 100%;" type="text" placeholder="搜索地点" disabled v-model="address">
			</view>
		</view>
		<u-picker mode="selector" v-model="addressShow" :range="addressList" @confirm="citySelection"></u-picker>
		
		<!-- 列表 -->
		<view class="list" v-for="(item,index) in list" :key="index" @tap="selectAStore(item)">
			<view class="list_t flex-r-b-c">
				<view class="address">{{item.address}}</view>
				<view class="text" v-if="item.dang == 1">当前选择</view>
			</view>
			<view class="name">{{item.shop_name}}</view>
			<view class="timeBox flex-r-b-c">
				<view class="time_l flex-r-c-c">
					<image src="/static/my/dz.png" mode=""></image>
					<view class="text">{{item.distance}}km | 点单营业时间{{item.business_hours}}</view>
				</view>
				<image src="/static/shop/dz.png" mode=""></image>
			</view>
		</view>
		
		<!-- 提示栏 -->
		<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// addressShow: false,
				addressList: [],
				addressListText: '',
				list: [],
				isText: '',
				page: 0,
	
				address: '',
				lng:'',
				lat:'',
				page:1,
				city_id:'',
				chooseId:''
			};
		},
		onLoad(el) {
			this.chooseId = el.shop_id
			console.log(el,'elll')
			this.getChoiceShopList() 
			this.toCity()
			uni.$on('data',(res) => {
				this.addressListText = res.city 
				this.city_id = res.id 
				this.getChoiceShopList()
			})
			
			 // 商家店铺列表
			// this.getCityList()
		},
		onUnload() { 
		  // 移除监听事件  
			uni.$off('data')
		},
		methods: {
			toCity(){
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						that.$api.getBaidu({
							location: res.latitude + decodeURIComponent(',') + res.longitude,
							output: 'json',
							pois: '1',
							ak: 'zAy6isz4tlSFkVxZ0HgzEN2RECLavywT'
						}).then(e=>{
							this.addressListText = e.data.result.addressComponent.city
						})
					}
				});
			},
			toChooseCity(e){
				uni.navigateTo({
					url: '/pages/shop/choiceCity/choiceCity'
				})
			},
			// 微信定位
			WXAddress() {
				let that = this
				uni.chooseLocation({
					success(res) {
						that.address = res.name
						that.lng = res.longitude
						that.lat = res.latitude
						that.getChoiceShopList()
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 商家店铺列表
			getChoiceShopList(type){
				let that = this
				if(!that.lat||!that.lng){
					that.lat = uni.getStorageSync('location').lat
					that.lng = uni.getStorageSync('location').lng
				}
				that.$api.shopList({
					page: that.page,
					lat: that.lat,
					lng: that.lng,
					city_id: that.city_id
				}).then(res => {
					res.data.data.list.length == 0 ? that.isText = '暂无数据' : that.isText = ''
					that.list = type == 'hebin' ? that.list.concat(res.data.data.list) : res.data.data.list
					that.list = that.list.map(item=>{	
						return{
							...item,
							distance: Number(item.distance).toFixed(1)
						}
					})
					that.list.forEach(item=>{
						if(item.id == that.chooseId){
							item.dang = 1
						}
					})
				})
			},

			// 选择默认店铺
			selectAStore(el){
				let pages = getCurrentPages()
				let prevPage = pages[ pages.length - 2 ]
				prevPage.$vm.pageData.shop_id = el.id;   
				uni.navigateBack({ 
					delta: 1
				});
			}
		},
		onReachBottom() {
			let that = this
			if(that.isText == ''){
				that.page = that.page + 1
				that.getChoiceShopList('hebin')
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f9f9f9;
	}
	.choiceShop{
		width: 100vw;
		.pickerBox{
			width: 100%;
			height: 80rpx;
			background-color: #fff;
			padding: 30rpx;
			.list{
				width: 78%;
				height: 58rpx;
				background-color: #fff;
				border-radius: 20rpx;
				border: 2rpx solid gainsboro;
			}
			.text{
				width: 15%;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap; 
				font-size: 28rpx;
				font-weight: 400;
				color: #7F8084;
				margin-right: 6rpx;
			}
		}
		
		.list{
			width: 90%;
			margin: 30rpx auto;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			.list_t{
				width: 100%;
				font-size: 24rpx;
				font-weight: 400;
				color: #7F8084;
			}
			.name{
				font-size: 28rpx;
				font-weight: 400;
				color: #000;
				margin: 20rpx 0rpx;
			}
			.timeBox{
				margin-top: 30rpx;
				.time_l{
					image{
						width: 22rpx;
						height: 26rpx;
						margin-right: 20rpx;
					}
				}
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		
	}
</style>
